<template>
  <div class="main" id="div_ossinfo_preview_component">
    <a :href="ossurl(info.oiid)" target="_blank">{{ info.filename }}</a>
    <div v-if="info.contentType && FileTools.getFileType(info.contentType) == 'image'">
      <img :src="ossurl(info.oiid)" alt="" />
    </div>
    <div v-else-if="info.contentType && FileTools.getFileType(info.contentType) == 'video'">
      <video :src="ossurl(info.oiid)" controls></video>
    </div>
    <div v-else-if="info.contentType && FileTools.getFileType(info.contentType) == 'audio'">
      <audio :src="ossurl(info.oiid)" controls></audio>
    </div>
    <div v-else>
      {{ info.fileinfo }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { PropType, computed } from 'vue'
import { TbOssInfo } from '../ts/types/Oss'
import FileTools from '../ts/FileTools'
import { BASE_URL } from '../ts/ApiService'

const ossurl = (oiid: number) => {
  return `${BASE_URL}/oss/info/url/${oiid}`
}

const props = defineProps({
  ossinfo: {
    type: Object as PropType<TbOssInfo>,
    required: true,
    default: {} as TbOssInfo,
  },
})

const info = computed(() => {
  return props.ossinfo
})
</script>
<style scoped lang="scss">
.main {
  max-width: 40vw;
  max-height: 60vh;
  overflow-y: auto;
  img,
  video {
    display: block;
    width: 100%;
    height: auto;
  }
  > div {
    margin: 0.5rem;
  }
}
</style>
